<template>
  <div class="container">
    <header class="header">
      <van-nav-bar
        title="我的购物车"
        right-text="我的地址"
        left-arrow
        @click-left='goBack'
      />
    </header>
    <div class="content" v-if="this.cartlist">
      <cartlist :cartlist = "cartlist"></cartlist>
    </div>
    <div class="content" v-else>
      您的购物车空空如也
      <router-link to="/market">去购物</router-link>
      您可能对如下产品感兴趣
    </div>
    <div class="footer">
      <div class="f-l">
        <input type="checkbox" v-model="all" @change="selectAll">
        <i>全选</i>
      </div>
      <div class="f-c">
        <span>总计：</span>
        <u>{{ totalNum }}件</u>
      </div>
      <div class="f-r">
        <p>
          结算：
          {{ totalPrice | moneyFilter}}
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import Cartlist from '@/components/Cartlist'
// import { mapState, mapActions, mapGetters } from 'vuex'
import { NavBar } from 'vant';

Vue.use(NavBar);
export default {
  data () {
    return {
      goods: [],
      cartlist: [],
      totalPrice: 0,
      totalNum: 0
    }
  },
  components: {
    cartlist: Cartlist
  },
 beforeRouteEnter(to, from, next)  {
    next(vm => {
      if (localStorage.getItem('isLogin') === 'ok') {
        next()
      } else {
        vm.$router.push('/login')
      }
    })
  },
  computed: {
    totalPrice() {
      this.cartlist.map(item => {        
        return this.totalPrice += parseInt(item.num) * Math.round(item.collect_count * 0.88)
      })
    },
    totalNum() {
      this.cartlist.map(item => {        
        return this.totalNum += parseInt(item.num)
      }) 
    }
  },
  created () {
    this.goods = localStorage.getItem('goods') ? JSON.parse(localStorage.getItem('goods')) : []
  },
  mounted () {
    axios.get('https://www.daxunxun.com/douban?count=229').then(res => {
      var arr = []
      this.goods.map(i => {
        res.data.map(item => {
          if (i.id === item.id) {
            item.num = i.num
            arr.push(item)
          }
        })
      })
      this.cartlist = arr
      console.log(this.cartlist)
      this.cartlist.map(item => {        
        this.totalPrice += parseInt(item.num) * Math.round(item.collect_count * 0.88)
        this.totalNum += parseInt(item.num)
      })
    })
  },
  methods: {
    goBack () {
      this.$router.back()
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  overflow: auto;
  .content{
    overflow: auto;
  }
  .footer{
    height: 40px;
    background: #efefef;
    display: flex;
    justify-content: space-around;
    .f-l{
      display: flex;
      margin-left: 15px;
      margin-top:15px;
      input{
        flex: 1;
        width: 20px;
        height: 20px;
      }
      i{
        margin-left: 5px;
      }
    }
    .f-c{
      margin-left: 15px;
      margin-top:15px;
    }
    .f-r{
      margin-left: 15px;
      margin-top:15px;
    }
  }
}
</style>


